<template>
    <div>
        <div class="footer" v-if="!$store.state.isMobileAndPc">
            <div class="footer-content">
                <div class="footer-content-title wow bounceInLeft" v-if="type == '1'" data-wow-delay=".3s"
                    data-wow-duration="0.3s">
                    传统企业短视频营销获客利器
                </div>
                <div class="footer-content-title wow bounceInLeft" v-if="type == '2'" data-wow-delay=".3s"
                    data-wow-duration="0.3s">
                    传统持久续航、超低成本直播间<br />开启数字化直播新时代
                </div>
                <div class="footer-content-title wow bounceInLeft" v-if="type == '3'" data-wow-delay=".3s"
                    data-wow-duration="0.3s">
                    欢迎怀抱梦想和热情的人才<br />加入品达合伙人筑梦平台
                </div>
                <div class="footer-content-title wow bounceInLeft" v-if="type == '2'" data-wow-delay=".3s"
                    data-wow-duration="0.3s">
                </div>
                <div class="footer-content-details wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.6s">
                    留下联系方式，我们将为您提供一对一的咨询服务</div>
                <div class="footer-content-cross wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.9s"></div>
            </div>
            <div class="footer-submit">
                <div class="con-form wow bounceRight" data-wow-delay=".3s" data-wow-duration="0.3s">
                    <el-form :model="contactForm" :rules="contactRules" ref="contactForm">
                        <el-form-item prop="name">
                            <el-input style="width:320px" v-model="contactForm.name" placeholder="请输入您的姓名"
                                size="medium"></el-input>
                        </el-form-item>
                        <el-form-item prop="phone">
                            <el-input style="width:320px" v-model="contactForm.phone" placeholder="请输入您的联系电话"
                                size="medium"></el-input>
                        </el-form-item>
                        <el-form-item prop="company">
                            <el-input style="width:320px" v-model="contactForm.company" placeholder="请输入您的企业名称"
                                size="medium"></el-input>
                        </el-form-item>
                        <el-form-item prop="class">
                            <el-select style="width:320px" v-model="contactForm.class" placeholder="请选择您的业务分类" size="medium"
                                :popper-append-to-body="false">
                                <el-option v-for="item in contactList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>
                    <vs-button :loading="addLoading" @click="onSubmit" style="background: linear-gradient(90deg, #006FFF 0%, #60DCA7 100%);
                            font-size: 18px;
                            padding: 6px 0;
                            width: 100%;
                            margin-top: 40px;
                            border-radius:30px;">一键提交</vs-button>

                </div>
            </div>
            <div class="solution-footer-info">
                <!-- <div class="wow bounceInUp" data-wow-delay=".3s" data-wow-duration="0.3s"> -->
                <div>
                    杭州品达企服科技 (集团) 有限公司 ▏<span style="cursor: pointer;" @click="openWindow">浙ICP备2023023097号-1</span>
                </div>
            </div>
        </div>
        <div class="footer-mobile" v-else>
            <div style="padding: 30px;">
                <div class="footer-mobile-head">{{desc}}</div>
                <div class="footer-mobile-head" v-if="desc1">{{desc1}}</div>
                <div class="footer-mobile-phone">
                    留下联系方式，我们将为您提供一对一的咨询服务
                </div>
                <div class="footer-mobile-gn"></div>
                <div class="footer-mobile-submit">

                    <div class="con-form wow bounceRight" data-wow-delay=".3s" data-wow-duration="0.3s">
                        <el-form :model="contactForm" :rules="contactRules" ref="contactForm">
                            <el-form-item prop="name">
                                <el-input style="width:320px; margin: 0 auto;" v-model="contactForm.name" placeholder="请输入您的姓名"
                                    size="medium"></el-input>
                            </el-form-item>
                            <el-form-item prop="phone">
                                <el-input style="width:320px; margin: 0 auto;" v-model="contactForm.phone" placeholder="请输入您的联系电话"
                                    size="medium"></el-input>
                            </el-form-item>
                            <el-form-item prop="company">
                                <el-input style="width:320px; margin: 0 auto;" v-model="contactForm.company" placeholder="请输入您的企业名称"
                                    size="medium"></el-input>
                            </el-form-item>
                            <el-form-item prop="class">
                                <el-select style="width:320px; margin: 0 auto;" v-model="contactForm.class" placeholder="请选择您的业务分类" size="medium"
                                    :popper-append-to-body="false">
                                    <el-option v-for="item in contactList" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <vs-button :loading="addLoading" @click="onSubmit" 
                        style="background: linear-gradient(90deg, #006FFF 0%, #60DCA7 100%);
                                    font-size: 18px;
                                    padding: 6px 0;
                                    width: 320px;
                                    margin: 40px auto 0;
                                    border-radius:30px;">一键提交</vs-button>

                    </div>
                </div>
            </div>
            <div class="footer-mobile-info"> 
                杭州品达企服科技 (集团) 有限公司 ▏<span style="cursor: pointer;" @click="openWindow">浙ICP备2023023097号-1</span>
            </div>
        </div>
    </div>
</template>
<script>
import { websiteInfo } from '@/api/index'
export default {
    props: {
        type: {
            type: String,
            default: '1'
        },
        desc:{
            type: String,
            default: '欢迎怀抱梦想和热情的人才'
        },
        desc1:{
            type: String,
            default: '加入品达合伙人筑梦平台'
        }
    },
    data() {
        let checkPhone = (rule, value, callback) => {
            if (value) {
                let isPhone = /^1\d{10}$/;
                let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
                if (!reg.test(value) && !isPhone.test(value) && value) {
                    callback(new Error("请输入正确的手机号/座机号"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        return {
            addLoading: false,
            contactForm: {
                name: null,
                phone: null,
                company: null,
                class: null
            },
            contactList: [
                {
                    id: 1,
                    name: "易播数字人",
                },
                {
                    id: 2,
                    name: "牛视3.0",
                },
                {
                    id: 3,
                    name: "智企云平台",
                }
            ],
            contactRules: {
                name: [
                    {
                        required: true,
                        message: "请输入您的姓名",
                        trigger: "blur",
                    },
                ],
                company: {
                    required: true,
                    message: "请输入您的企业名称",
                    trigger: "blur",
                },
                class: {
                    required: true,
                    message: "请选择您的业务分类",
                    trigger: "change",
                },
                phone: [
                    {
                        required: true,
                        message: "请正确输入您的联系电话",
                        trigger: "blur",
                    },
                    { validator: checkPhone, trigger: 'blur' }
                ],
            },
        }
    },
    beforeCreate() {
        let imgs = [
            "https://static.pdwl.net/jituan/images/icon17.png"
        ]
        imgs.forEach((item) => {
            let img = new Image();
            img.src = item;
            img.onload = function () { }
        })
    },
    methods: {
        openWindow() {
            window.open('https://beian.miit.gov.cn')
        },
        onSubmit() {
            let that = this
            this.$refs.contactForm.validate(async (valid) => {
                if (valid) {
                    this.addLoading = true
                    try {
                        let res = await websiteInfo(this.contactForm)
                        this.addLoading = false
                        if (res.code == 1) {
                            this.$message.success('您的需求已提交成功，客户经理将在24小时内拜访您，请耐心等待，谢谢')
                            this.contactForm = {
                                name: null,
                                phone: null,
                                company: null,
                                class: null
                            }
                        }
                    } catch (error) {
                        that.addLoading = false;
                    }
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.footer {
    background-image: url('https://static.pdwl.net/jituan/images/icon17.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    height: 608px;
    width: 100%;
    position: relative;

    &-content {
        position: absolute;
        left: 15%;
        top: 170px;

        &-title {
            background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 50px;
            font-weight: bold;
        }

        &-details {
            font-size: 22px;
            font-family: Microsoft YaHei-Light, Microsoft YaHei;
            font-weight: 300;
            color: #FFFFFF;
            line-height: 60px;
        }

        &-cross {
            width: 60px;
            height: 4px;
            background: #FFFFFF;
            border-radius: 0px 0px 0px 0px;
            margin-top: 40px;
        }
    }

    &-submit {
        position: absolute;
        right: 15%;
        top: 170px;

        ::v-deep .el-input__inner {
            background-color: rgba(0, 29, 123, .1);
            box-shadow: inset 0px 0px 50px 1px #001D7B;
            border: 1px solid #006FFF;
            height: 48px;
            color: #fff;
        }

        ::v-deep .el-input__inner::placeholder {
            color: #fff;
        }
    }

}

.solution-footer-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    border-top: 1px solid #D6D6D6;
    height: 74px;
    line-height: 74px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;

}
.footer-mobile{
    // width: 100%;
    color: #fff;
    background-image: url('https://static.pdwl.net/jituan/images/mobile/icon1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    &-head{
        font-size: 44px;
        font-weight: bold;
        line-height: 55px;
        background: linear-gradient(90deg, #006FFF 0%,#62DEA6 55%, #62DEA6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    &-phone{
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 16px;
        margin: 30px 0;
    }
    &-gn{
        width: 60px;
        height: 2px;
        background: linear-gradient(124deg, #006FFF 0%, #62DEA6 100%);
        margin-bottom: 40px;
    }
    &-submit {
        ::v-deep .el-form-item--small.el-form-item{
            margin-bottom: 35px;
        }
        margin: 0 auto;
        .con-form{
            text-align: center;
        }
        ::v-deep .el-input__inner {
            background-color: rgba(0, 29, 123, .1);
            box-shadow: inset 0px 0px 50px 1px #001D7B;
            border: 1px solid #006FFF;
            height: 68px;
            color: #fff;
            margin-bottom: 15px;
        }

        ::v-deep .el-input__inner::placeholder {
            color: #fff;
        }
    }

}
.footer-mobile-info{
    width: 100%;
    color: #fff;
    padding: 30px ;
    text-align: center;
    border-top: 1px solid #D6D6D6; 
    box-sizing: border-box; 
}

</style>
